<template>
  <div class="container" @mouseover="mouseOver" @mouseout="mouseOut">
    <CommonTitle><p slot="title">教育头条</p></CommonTitle>
    <table>
      <thead>
        <tr>
          <th>列表图</th>
          <th>标题</th>
          <th>描述</th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="(item, index) in showList"
          :key="index"
          :class="{ anim: myanimate == true }"
        >
          <td>
            <img :src="item.imgurl" alt="" />
          </td>
          <td>{{ item.title }}</td>
          <td>{{ item.describe }}</td>
        </tr>
      </tbody>
    </table>
    <div
      class="decbook"
      :style="{ backgroundImage: 'url(' + imgSrc1 + ')', opacity: 0.6 }"
    ></div>
  </div>
</template>

<script>
import CommonTitle from "./CommonTitle";
export default {
  components: {
    CommonTitle,
  },
  props: ["eduNewsData"],
  data() {
    return {
      showList: [],
      myanimate: Boolean,
      imgSrc1: require("@/assets/HomeViewImages/decpic/book.jpg"),
      // tableData: [
      //   {
      //     imgurl: require("@/assets/HomeViewImages/news/main-jiaoyutoutiao.png"),
      //     title: "30所京城中小学这样过“世界读书日”",
      //     describe:
      //       "正值4月23日世界读书日，图书日设立的目的是推动更多的人去阅读和写作，希望所有人都能",
      //   },
      // ],
    };
  },
  mounted() {
    this.timer = setInterval(this.scroll, 2000);
  },
  watch: {
    eduNewsData(newV, oldV) {
      var arr = JSON.parse(JSON.stringify(newV));
      this.showList = arr;
    },
  },
  methods: {
    scroll() {
      this.myanimate = true; // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
      setTimeout(() => {
        //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
        this.showList.push(this.showList[0]); // 将数组的第一个元素添加到数组的最后
        this.showList.shift(); //删除数组的第一个元素
        this.myanimate = false; // margin-top 为0 的时候取消过渡动画，实现无缝滚动
      }, 1000);
    },
    mouseOver() {
      // console.log("鼠标悬停");
      // this.myanimate = false;
      clearInterval(this.timer);
    },
    mouseOut() {
      // this.myanimate = true;
      this.timer = setInterval(this.scroll, 2000);
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  box-sizing: border-box;
  padding: 24px;
  padding-bottom: 0;
  height: 100%;
  overflow-y: scroll;
  position: relative;
  background-color: #fff;
  // 隐藏滚动条
  &::-webkit-scrollbar {
    width: 0 !important;
  }
  & {
    -ms-overflow-style: none;
  }
  & {
    overflow: -moz-scrollbars-none;
  }

  &:hover h3 {
    color: #438afe;
  }
  h3 {
    margin-bottom: 20px;
  }

  table {
    box-sizing: border-box;
    text-align: left;
    margin-left: 30px;
    // width: 100%;
    th {
      font-size: 16px;
      font-family: "微软雅黑";
      font-weight: bold;
      color: #333333;
    }

    tbody tr {
      height: 74px;
      td {
        box-sizing: border-box;
        padding: 20px 30px 0 0;
        font-size: 14px;
        line-height: 20px;
        vertical-align: middle;
        font-family: "微软雅黑";
        color: #333333;

        &:nth-of-type(3n + 1) {
          width: 130px;
        }
        &:nth-of-type(3n + 2) {
          width: 160px;
        }
        &:nth-of-type(3n) {
          padding-right: 40px;
          -webkit-line-clamp: 2;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      img {
        width: 80px;
        height: 60px;
        vertical-align: middle;
      }
    }
  }
  .decbook {
    width: 100px;
    height: 80px;
    // border: 1px solid #333;
    position: absolute;
    right: 10px;
    top: 14px;

    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;

    transform: rotate(45deg);
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari and Chrome */
  }
}
</style>